<template>
  <div class="app-container">
    <!--查询位置-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="关键词" prop="keyword">
        <el-input
                v-model="queryParams.keyword"
                placeholder="请输入关键词"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery">
          <el-icon><Search /></el-icon>搜索</el-button>
        <el-button size="mini" @click="resetQuery">
          <el-icon><Refresh /></el-icon>重置</el-button>
      </el-form-item>
    </el-form>

    <!--按钮位置-->
    <el-row :gutter="10" class="mb8" style="margin-bottom: 2px;">
      <el-col :span="1.5">
        <el-button
                type="primary"
                plain
                size="mini"
                @click="handleAdd"
        > <el-icon><Plus /></el-icon> 新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
                type="danger"
                plain
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
        ><el-icon><Delete /></el-icon>删除
        </el-button>
      </el-col>
    </el-row>

    <!--列表-->
    <el-table :height="tableMaxHeight" stripe border v-loading="loading" :data="tableDataList"
              @selection-change="handleSelectionChange" ref="objectTable" style="width:98%;border: 1px solid #EBEEF5;">
      <el-table-column type="selection" width="55" align="center"/>
      
          <el-table-column prop="usertype" :show-overflow-tooltip="true" width="150" label="字典 用户类型   系统用户 系统管理  超级管理" align="center">
          </el-table-column>

          <el-table-column prop="email" :show-overflow-tooltip="true" width="150" label="邮箱" align="center">
          </el-table-column>

          <el-table-column prop="phonenumber" :show-overflow-tooltip="true" width="150" label="手机号" align="center">
          </el-table-column>

          <el-table-column prop="sex" :show-overflow-tooltip="true" width="150" label="字典 性别类型     女  男" align="center">
          </el-table-column>

          <el-table-column prop="avatar" :show-overflow-tooltip="true" width="150" label="头像" align="center">
          </el-table-column>

          <el-table-column prop="username" :show-overflow-tooltip="true" width="150" label="账号" align="center">
          </el-table-column>

          <el-table-column prop="password" :show-overflow-tooltip="true" width="150" label="密码" align="center">
          </el-table-column>

          <el-table-column prop="status" :show-overflow-tooltip="true" width="150" label="字典 账号状态 是否启用    启用   禁用" align="center">
          </el-table-column>

          <el-table-column prop="numberoflogins" :show-overflow-tooltip="true" width="150" label="登录次数" align="center">
          </el-table-column>

          <el-table-column prop="createtime" :show-overflow-tooltip="true" width="150" label="创建时间" align="center">
          </el-table-column>

          <el-table-column prop="updatetime" :show-overflow-tooltip="true" width="150" label="更新时间" align="center">
          </el-table-column>

          <el-table-column prop="updateby" :show-overflow-tooltip="true" width="150" label="更新人 ID" align="center">
          </el-table-column>

          <el-table-column prop="enterpriseid" :show-overflow-tooltip="true" width="150" label="企业 ID" align="center">
          </el-table-column>

          <el-table-column prop="isdel" :show-overflow-tooltip="true" width="150" label="字典 是否删除   已删除   未删除" align="center">
          </el-table-column>

          <el-table-column prop="logindate" :show-overflow-tooltip="true" width="150" label="最后登录时间" align="center">
          </el-table-column>

          <el-table-column prop="officeid" :show-overflow-tooltip="true" width="150" label="职务  ID" align="center">
          </el-table-column>

          <el-table-column prop="departmentid" :show-overflow-tooltip="true" width="150" label="部门ID" align="center">
          </el-table-column>

          <el-table-column prop="name" :show-overflow-tooltip="true" width="150" label="用户姓名" align="center">
          </el-table-column>

      <el-table-column label="操作" class-name="small-padding fixed-width" fixed="right"
                       min-width="130" align="center">
        <template #default="scope">
          <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.current"
            :page-sizes="[8, 20, 50, 100, 300]"
            :page-size="queryParams.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="float:right;margin: 10px 30px 0 0">
    </el-pagination>

    <!-- [新增/修改]弹框界面 -->
    <el-dialog
            title="提示"
            v-model="dialogOpen"
            :before-close="handleClose"
            style="overflow: hidden"
            width="40%"
            top="80px"
    >
      <div style="overflow-y: auto; height: 700px;">
        <el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="70px">


              <el-form-item label="字典 用户类型   系统用户 系统管理  超级管理" prop="usertype">
                <el-input v-model="addForm.usertype" placeholder="字典 用户类型   系统用户 系统管理  超级管理" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email" placeholder="邮箱" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="手机号" prop="phonenumber">
                <el-input v-model="addForm.phonenumber" placeholder="手机号" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="字典 性别类型     女  男" prop="sex">
                <el-input v-model="addForm.sex" placeholder="字典 性别类型     女  男" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="头像" prop="avatar">
                <el-input v-model="addForm.avatar" placeholder="头像" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="账号" prop="username">
                <el-input v-model="addForm.username" placeholder="账号" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password" placeholder="密码" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="字典 账号状态 是否启用    启用   禁用" prop="status">
                <el-input v-model="addForm.status" placeholder="字典 账号状态 是否启用    启用   禁用" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="登录次数" prop="numberoflogins">
                <el-input v-model="addForm.numberoflogins" placeholder="登录次数" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="创建时间" prop="createtime">
                <el-input v-model="addForm.createtime" placeholder="创建时间" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="更新时间" prop="updatetime">
                <el-input v-model="addForm.updatetime" placeholder="更新时间" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="更新人 ID" prop="updateby">
                <el-input v-model="addForm.updateby" placeholder="更新人 ID" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="企业 ID" prop="enterpriseid">
                <el-input v-model="addForm.enterpriseid" placeholder="企业 ID" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="字典 是否删除   已删除   未删除" prop="isdel">
                <el-input v-model="addForm.isdel" placeholder="字典 是否删除   已删除   未删除" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="最后登录时间" prop="logindate">
                <el-input v-model="addForm.logindate" placeholder="最后登录时间" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="职务  ID" prop="officeid">
                <el-input v-model="addForm.officeid" placeholder="职务  ID" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="部门ID" prop="departmentid">
                <el-input v-model="addForm.departmentid" placeholder="部门ID" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

              <el-form-item label="用户姓名" prop="name">
                <el-input v-model="addForm.name" placeholder="用户姓名" auto-complete="off" show-word-limit style="width: 100%;"></el-input>
              </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="handleClose">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import request from '../../utils/request';
  export default {
    name: "SysUser",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 参数表格数据
        tableDataList: [],
        // 是否显示弹出层
        dialogOpen: false,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          current: 1,
          size: 8,
          keyword: undefined,
        },
        // 表单参数
        addForm: {},
        // 表单校验
        rules: {
          id: [{ required: true, message: 'id不能为空', trigger: 'blur' }],
          usertype: [{ required: true, message: '字典 用户类型   系统用户 系统管理  超级管理不能为空', trigger: 'blur' }],
          email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
          phonenumber: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
          sex: [{ required: true, message: '字典 性别类型     女  男不能为空', trigger: 'blur' }],
          avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
          username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
          password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
          status: [{ required: true, message: '字典 账号状态 是否启用    启用   禁用不能为空', trigger: 'blur' }],
          numberoflogins: [{ required: true, message: '登录次数不能为空', trigger: 'blur' }],
          createtime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
          updatetime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
          updateby: [{ required: true, message: '更新人 ID不能为空', trigger: 'blur' }],
          enterpriseid: [{ required: true, message: '企业 ID不能为空', trigger: 'blur' }],
          isdel: [{ required: true, message: '字典 是否删除   已删除   未删除不能为空', trigger: 'blur' }],
          logindate: [{ required: true, message: '最后登录时间不能为空', trigger: 'blur' }],
          officeid: [{ required: true, message: '职务  ID不能为空', trigger: 'blur' }],
          departmentid: [{ required: true, message: '部门ID不能为空', trigger: 'blur' }],
          name: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
        },
      };
    },

    methods: {
      /** 关闭弹框 */
      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  this.dialogOpen=false
                  done();
                })
                .catch(_ => {});
      },
      /** 获取列表数据方法 */
      getList() {
        this.loading = true;
        request.post("/suUser/pagelist", this.queryParams).then(result => {
          this.tableDataList = result.data.records;
          this.total = result.data.total;
          this.loading = false;  //关闭加载圈
        });
      },

      /** 点击 搜索 按钮 */
      handleQuery() {
        this.queryParams.current = 1;
        this.getList();
      },

      /** 点击 重置 按钮 */
      resetQuery() {
        this.dateRange = [];
        if (this.$refs['queryForm']) {
          this.$refs['queryForm'].resetFields();
        }
        this.handleQuery();
      },

      /** 选择第几页事件 */
      handleCurrentChange(current) {
        this.queryParams.current = current;
        this.getList();
      },

      /** 选择每页显示条数 */
      handleSizeChange(size) {
        this.queryParams.size = size
        this.getList();
      },

      /** 点击 新增 按钮 */
      handleAdd() {
        this.addForm = Object.assign({}, {});
        this.dialogOpen = true;
      },

      /** 多选框选中数据事件 */
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);//将数组里面的ID取出来形成ids集合
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },

      /** 取消多选框选中的记录 */
      cancelSelectionChange() {
        this.$refs.objectTable.clearSelection();
      },

      /** 点击 修改 按钮 */
      handleUpdate(row) {
        this.addForm = Object.assign({}, row);
        this.dialogOpen = true;
      },

      /** 提交按钮 */
      submitForm: function () {
        this.$refs["addFormRef"].validate(valid => {
          if (valid) {
            if (this.addForm.id != undefined) {
              request.post("/suUser/update", this.addForm).then(result => {
                this.dialogOpen = false;
                this.getList();
              });
            } else {
              request.post("/suUser/save", this.addForm).then(result => {
                this.dialogOpen = false;
                this.getList();
              });
            }
          }
        });
      },

      /** 删除操作 */
      handleDelete(row) {
        if (row.id) {
          this.cancelSelectionChange();//取消复选框
          this.ids.push(row.id);
        }
        const tempIds = this.ids;
        let tishi = '';
        if (tempIds.length == 0) {
          tishi = '您确定要删除这条数据吗';
        } else {
          tishi = '您确定要删除这【' + tempIds.length + '】条数据吗？';
        }
        let param = {
          "ids": tempIds,
        }
        this.$confirm(tishi, '请确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.post("/suUser/batchDelete", param).then(result => {
            if (result.data.success) {
              this.$message({
                type: 'success',
                message: result.data.message
              });
            } else {
              this.$message({
                type: 'error',
                message: result.data.message
              });
            }
            this.getList();
          });
        }).catch(() => {
          console.log('已取消删除操作');
        });
      },
    },

    //计算表格高度
    computed: {
      tableMaxHeight() {
        return window.innerHeight - 280 + 'px'
      }
    },

    //钩子函数，进入页面就会加载的
    created() {
      this.getList();
    },
  };
</script>

<style scoped>
</style>